<template>
    <div class="child">
        Child
        <Grandson ref="grandsonRef"></Grandson>
    </div>
</template>
<script setup>
import {ref,onMounted,getCurrentInstance } from 'vue';
import Grandson from './Grandson.vue';
//如果在这里想使用它的Parent组件和Grandson组件上的方法应该如何实现
//如何在父组件获取子组件实例，通过ref属性来获取 子组件实例
//Vue3的setup中不能通过this获取当前组件的实例
const grandsonRef = ref(null);
onMounted(()=>{
    console.log('grandson',grandsonRef.value);
    //访问子组件实例上的属性
    console.log('grandsonName',grandsonRef.value.grandsonName);
    //获取当前的组件实例
    const currentInstance = getCurrentInstance();
    console.log('currentInstance',currentInstance)
    console.log('parentInstance',currentInstance.parent)
    //获取父组件实例上暴露的属性
    console.log('parent',currentInstance.parent.exposed.parentName)
    //这样可以获取到根组件的实例
    const rootInstance = currentInstance.appContext.app;
    console.log('rootInstance',rootInstance)

});

</script>
<style>
.child{
    border:5px solid red;
    padding:10px;
}
</style>